<script src="../../vendor/jquery/jquery.pseudo.js"></script>

<link rel="stylesheet" href="../../vendor/bootstrap/css/treeStyle.css" />

<!-- 角色配置页面 -->
<div id="page-wrapper" class="roleConfig-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">角色配置</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-gear fa-fw"></i> 功能配置
                </div>

                <div class="panel-body" id="roleConfigBody">
                    <table class="table table-bordered fontSize16" id="roleConfigTable">
                        <thead>
                            <tr>
                                <th>角色</th>
                                <th></th>
                                <th>节点</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td id="roleTd">
                                    <div id="roleBody">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="role" id="thermalDiagramApplicationInput" value="thermalDiagramApplication" checked>热力图应用
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="role" id="systemAdministratorInput" value="systemAdministrator">系统管理员
                                            </label>
                                        </div>
                                    </div>
                                </td>

                                <td id="dbRightTd">>></td>

                                <td id="treeTd">
                                    <div class="tree" id="treeBody">
                                        <ul>
                                            <li>
                                                <a href="javascript:;" id="openAllNode">打开全部</a>
                                                |
                                                <a href="javascript:;" id="closeAllNode">关闭全部</a>
                                            </li>
                                            <li>
                                                系统功能树
                                            </li>
                                            <li class="max_parent_li">
                                                <span>
                                                    <i class="fa fa-folder-open fa-fw"></i>
                                                    <s class="checkbox-inline"><input type="checkbox" id="checkbox01"><label class="checkbox-inline" for="checkbox01">系统管理</label></s>
                                                </span><a href="#"></a>
                                                <ul>
                                                    <li class="lastLi next_parent_li">
                                                        <span>
                                                            <i class="fa fa-minus-circle fa-fw"></i>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox01-1"><label class="checkbox-inline" for="checkbox01-1">一级节点1</label></s>
                                                        </span><a href="#"></a>
                                                        <ul>
                                                            <li class="lastLi">
                                                                <span>
                                                                    <s class="checkbox-inline"><input type="checkbox" id="checkbox01-1_1"><label class="checkbox-inline" for="checkbox01-1_1">二级节点1_1</label></s>
                                                                </span><a href="#"></a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="lastLi max_parent_li">
                                                <span>
                                                    <i class="fa fa-folder-open fa-fw"></i>
                                                    <s class="checkbox-inline"><input type="checkbox" id="checkbox02"><label class="checkbox-inline" for="checkbox02">热力图应用</label></s>
                                                </span><a href="#"></a>
                                                <ul>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-1"><label class="checkbox-inline" for="checkbox02-1">人口迁移统计</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-2"><label class="checkbox-inline" for="checkbox02-2">人流数据分析</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-3"><label class="checkbox-inline" for="checkbox02-3">湛江热力图</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-4"><label class="checkbox-inline" for="checkbox02-4">数据管理（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-5"><label class="checkbox-inline" for="checkbox02-5">自助分析（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-6"><label class="checkbox-inline" for="checkbox02-6">客户标签（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-7"><label class="checkbox-inline" for="checkbox02-7">集群监控（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li>
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-8"><label class="checkbox-inline" for="checkbox02-8">数据模型（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                    <li class="lastLi">
                                                        <span>
                                                            <s class="checkbox-inline"><input type="checkbox" id="checkbox02-9"><label class="checkbox-inline" for="checkbox02-9">数据接入配置（建设中...）</label></s>
                                                        </span><a href="#"></a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>

                        <tfoot>
                            <tr>
                                <th colspan="3" class="text-center">
                                    <button type="button" class="btn btn-primary btn-lg fontSize16" id="configBtn">保存</button>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {

        /* 打开全部树分支 */
        $('#openAllNode').on('click', function () {
            $('.tree li.parent_li').find(' > ul > li').show('fast')
                .parents('li.parent_li').find(' > span > i').attr('title', '关闭此分支').addClass('fa-minus-circle').removeClass('fa-plus-circle');
        });

        /* 关闭全部树分支 */
        $('#closeAllNode').on('click', function () {
            $('.tree li.parent_li').find(' > ul > li').hide('fast')
                .parents('li.parent_li').find(' > span > i').attr('title', '打开此分支').addClass('fa-plus-circle').removeClass('fa-minus-circle');
        });

        /* 控制分支开关 */
        $('.tree li:has(ul)').addClass('parent_li').find(' > span > i').attr('title', '关闭此分支');
        $('.tree li.parent_li > span > i').on('click', function (e) {
            var $oI = $(this);
            var children = $oI.parents('li.parent_li').eq(0).find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $oI.attr('title', '打开此分支').addClass('fa-plus-circle').removeClass('fa-minus-circle');
            } else {
                children.show('fast');
                $oI.attr('title', '关闭此分支').addClass('fa-minus-circle').removeClass('fa-plus-circle');
            }
            e.stopPropagation();
        });

        /* 控制父子分支 checkbox联响勾选 */
        $('.tree li.max_parent_li > span > s > input[type=checkbox]').on('change', function () {
            var $max_parent = $(this).parents('.max_parent_li');
            if ($(this).prop("checked")) {
                $max_parent.find('input[type=checkbox]').each(function () {
                    $(this).prop("checked", true);
                });
            } else {
                $max_parent.find('input[type=checkbox]').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });

        $('.tree li.max_parent_li > ul > li > span > s > input[type=checkbox]').on('change', function () {
            var $next_parent = $(this).parents('li').eq(0);    // $next_parent 既代表带.next_parent_li的li分支 也代表最末端分支
            var $max_parent_check = $next_parent.parents('.max_parent_li').find(' > span > s > input[type=checkbox]');
            if ($(this).prop("checked")) {
                $next_parent.find('input[type=checkbox]').each(function () {
                    $(this).prop("checked", true);
                });
                $max_parent_check.prop("checked", true);
            } else {
                $next_parent.find('input[type=checkbox]').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });

        $('.tree li.next_parent_li > ul > li > span > s > input[type=checkbox]').on('change', function () {
            var $next_parent = $(this).parents('.next_parent_li');
            var $max_parent_check = $next_parent.parents('.max_parent_li').find(' > span > s > input[type=checkbox]');
            var $next_parent_check = $next_parent.find(' > span > s > input[type=checkbox]');
            if ($(this).prop("checked")) {
                $next_parent_check.prop("checked", true);
                $max_parent_check.prop("checked", true);
            }
        });

    })();
</script>
